<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医院预约挂号</title>
    <!--浏览器小图标-->
    <link rel="shortcut icon" href="img/favicon.png">
    <!--自定义样式-->
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="element/element-ui.css">
    <!--引入地图组件-->

</head>
<body>
<div>
    <el-container>
        <!--自定义标签-->
        <el-header style="position: fixed;width: 100%;z-index: 1;">
            <index-header></index-header>
        </el-header>
        <el-main>
            <el-row>
                <el-col offset="2" span="20">
                    <el-row style="margin-top: 55px">
                        <el-col span="4">
                            <index-left-card></index-left-card>
                        </el-col>
                        <el-col span="20">
                            <!--右边卡片-->
                            <el-card shadow="hover" v-loading="loading" class="main-card">
                                <el-row>
                                    <el-col>
                                        <h2 style="margin: 10px 0 0 10px">Sanhos中心医院</h2>
                                    </el-col>
                                    <el-col style="margin-top: 30px;">
                                        <el-row>
                                            <el-col span="2">
                                                <img src="/img/hospitalLOGO.png" style="width: 100px;height: 100px"
                                                     alt="logo">
                                            </el-col>
                                            <el-col span="10" class="hospital-p-role">
                                                <p style="color:#333;font-size: 16px">挂号规则</p>
                                                <el-row>
                                                    <el-col span="8"><p>预约周期：<span
                                                            style="font-weight: bold">7天</span></p></el-col>
                                                    <el-col span="8"><p>放号时间：<span
                                                            style="font-weight: bold">8:00</span></p></el-col>
                                                    <el-col span="8"><p>停挂时间：<span style="font-weight: bold">19:00:00</span>
                                                    </p></el-col>
                                                </el-row>
                                                <el-col><p>退号时间：<span>就诊日6:00前取消</span></p></el-col>
                                                <el-col style="margin-top: 20px;"><p style="color:#333;font-size: 16px">
                                                    医院预约规则</p></el-col>
                                                <el-col>
                                                    <p>
                                                        <b>1.</b>患者可以在线上预约挂号，续到线下进行建档后才能进行就诊。<br/>
                                                        <b>2.</b>医院挂号支持医保支付，线上预约挂号不需要缴费，就诊时到线下取号进行医保支付。<br/>
                                                        <b>3.</b>用户一个工作日之内限预约一次。<br/>
                                                        <b>4.</b>患者因为检查检验项目第一天未完成就诊次日无需挂号。</br>
                                                        <b>5.</b>爽约次数达到3次以上、180日内该用户不可进行预约。<br/>
                                                    </p>
                                                </el-col>
                                                <el-col style="margin-top: 20px;">
                                                    <p style="color:#333;font-size: 16px">
                                                        咨询电话：176XXX66395<br/>
                                                        医院地址：武汉市洪山区虎泉街271号杨家湾Sanhos中心医院
                                                    </p>
                                                </el-col>
                                            </el-col>
                                            <el-col span="11" class="hospital-p-role">
                                                <el-row>
                                                    <el-col>
                                                        <iframe src="beforeIndex/map.html"
                                                                style="border: 0;width: 100%;height: 300px; padding: 0; margin: 0;overflow:hidden"></iframe>
                                                    </el-col>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col><h3 style="margin: 10px;">选择科室</h3></el-col>
                                    <!--一级科室-->
                                    <el-col span="4">
                                        <el-menu
                                                style="margin:0"
                                                class="firstDept"
                                                v-loading="loading"
                                                @select="handleSelectDept"
                                                mode="vertical"
                                                :default-active="activeIndex">
                                            <el-scrollbar class="scrollbar">
                                                <el-menu-item :index="index" v-for="(d,index) in dept1">{{d.deptname}}
                                                </el-menu-item>
                                            </el-scrollbar>
                                        </el-menu>
                                    </el-col>
                                    <el-col span="20">
                                        <!--二级科室-->
                                        <el-collapse>
                                            <el-collapse-item style="margin: 0 auto">
                                                <template slot="title">
                                                    <p>点击展开查看二级科室</p>
                                                </template>
                                                <el-row>
                                                    <el-col style="margin-left: 10px;margin-top: 10px"
                                                            v-for="s in targetDept" span="2"
                                                            v-if="targetDept.length!==0">
                                                        <el-link class="secondDept"
                                                                 :underline="false"
                                                                 style="font-size: 14px;font-weight: bold;"
                                                                 @click="secondDeptClick(s.id)">
                                                            {{s.deptname}}
                                                        </el-link>
                                                    </el-col>
                                                    <el-col v-if="targetDept.length===0">
                                                        <p style="text-align: center">暂无科室数据</p>
                                                    </el-col>
                                                </el-row>
                                            </el-collapse-item>
                                        </el-collapse>
                                        <!--一级科室医生/二级科室医生-->
                                        <el-scrollbar class="scrollbar">
                                            <el-row style="margin: 20px;">
                                                <el-col style="margin-bottom: 20px;" v-for="doctor in doctorData">
                                                    <el-descriptions column="6" :colon="false">
                                                        <!--插槽 title-->
                                                        <span slot="title" @mouseenter="handleMouseEnter"
                                                              @mouseleave="handleMouseLeave"
                                                              style="font-size: 16px; font-weight: bold;">
                                                            <el-popover placement="top-start" width="200"
                                                                        trigger="hover"
                                                                        :content="doctor.brief">
                                                            <div slot="reference">
                                                                 {{doctor.nickname}} | {{doctor.no}}
                                                            </div>
                                                            </el-popover>
                                                        </span>
                                                        <el-descriptions-item label="今日号源">
                                                            <!--无号状态显示红色字体-->
                                                            <span style="margin-left: 10px;font-size: 16px;font-weight: bold;color: #F56C6C"
                                                                  v-show="doctor.sourceSurplus===0">{{doctor.sourceSurplus}}</span>
                                                            <!--有号状态显示蓝色字体-->
                                                            <span style="margin-left: 10px;font-size: 16px;font-weight: bold;color: #409EFF"
                                                                  v-show="doctor.sourceSurplus>0">{{doctor.sourceSurplus}}</span>
                                                        </el-descriptions-item>
<!--                                                        <el-descriptions-item label="职称">-->
<!--                                                            <span style="font-size: 16px;font-weight: bold;">{{doctor.jobTitle}}</span>-->
<!--                                                        </el-descriptions-item>-->
                                                        <el-descriptions-item label="科室">
                                                            <span style="font-size: 16px;font-weight: bold;">{{doctor.deptName}}</span>
                                                        </el-descriptions-item>
                                                        <el-descriptions-item label="工龄">
                                                            <span style="font-size: 16px;font-weight: bold;">{{doctor.jobAge}}年</span>
                                                        </el-descriptions-item>
                                                        <el-descriptions-item label="状态">
                                                            <el-tag v-show="doctor.status===0&&doctor.sourceSurplus>0"
                                                                    effect="plain">可预约
                                                            </el-tag>
                                                            <el-tag type="warning"
                                                                    v-show="doctor.status===0&&doctor.sourceSurplus<=0"
                                                                    effect="plain">今日满号
                                                            </el-tag>
                                                            <el-tag type="danger" effect="plain"
                                                                    v-show="doctor.status===1">不可预约
                                                            </el-tag>
                                                        </el-descriptions-item>
                                                        <el-descriptions-item>
                                                            <el-button v-if="doctor.status===0"
                                                                       @click="checkIn(doctor.no)"
                                                                       type="primary">
                                                                <h3>预约</h3>
                                                            </el-button>
                                                            <el-button v-else disabled type="primary">
                                                                <h3>预约</h3>
                                                            </el-button>
                                                        </el-descriptions-item>
                                                    </el-descriptions>
                                                </el-col>
                                                <el-col v-if="doctorData.length===0">
                                                    <el-empty description="今日该科室无号源"></el-empty>
                                                </el-col>
                                            </el-row>
                                        </el-scrollbar>
                                    </el-col>
                                </el-row>
                            </el-card>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-main>
        <!--自定义标签-->
        <el-footer>
            <index-footer></index-footer>
        </el-footer>
    </el-container>
</div>
</body>
<!-- 引入Vue和Element UI库 -->
<script src="js/vue.js"></script>
<script src="element/element-ui.js"></script>
<!--引入axios框架文件-->
<script src="js/axios.js"></script>
<!--引入自定义header-->
<script src="js/index-header.js"></script>
<!--引入自定义footer-->
<script src="js/index-footer.js"></script>
<!--引入自定义卡片card-->
<script src="js/index-left-card.js"></script>
<!--客服-->
<script src="//code.tidio.co/gwmisqojw2guf7gb3dqqjcvm3wyeml7i.js" async></script>
<script>
    let v = new Vue({
        el: "body>div",
        data() {
            return {
                //默认选项
                activeIndex: 0,
                //默认科室id
                deptId: 0,
                //一级科室数据
                dept1: [],
                //二级科室数据
                dept2: [],
                //指定二级科室数据
                targetDept: [],
                //医生数据
                doctorData: [],
                //点击获取更多医生数据
                loadMoreDoctorStatus: false,
                //进入页面加载数据
                loading: true,
                //钱包抽屉 弃用
                purseDrawers: false,
                //鼠标悬停属性
                isTipVisible: false,
            }
        },
        methods: {
            //获取指定一级科室数据
            handleSelectDept(key, keyPath) {
                v.deptId = v.dept1[key].id;
                v.targetDept = []; //下次获取数据先清空上次的数据
                this.selectSecondDept(v.deptId);
                //获取一级科室医生数据
                this.selectDoctor(v.deptId);
                //关闭加载更多
                v.loadMoreDoctorStatus = false;
            },
            //获取指定二级科室数据
            selectSecondDept(firstDeptId) {
                for (let i = 0; i < v.dept2.length; i++) {
                    if (firstDeptId === v.dept2[i].level) {
                        //装目标数据
                        v.targetDept.push(v.dept2[i])
                    }
                }
                //关闭加载更多
                v.loadMoreDoctorStatus = false;
                v.loading = false;
            },
            //点击预约挂号 跳转到今天医生的号源
            checkIn(doctorNo) {
                //跳转到预约详情
                location.href = "/beforeIndex/orders.html?doctorNo=" + doctorNo;
            },
            //点击二级科室事件
            secondDeptClick(deptId) {
                v.deptId = deptId;
                //搜索当前二级科室的医生数据
                axios.get("/pa/doctor/queryByChildDeptId/" + deptId).then(function (res) {
                    if (res.data.code === 1) {
                        v.doctorData = res.data.data;
                    } else {
                        //数据不存在
                        v.doctorData = [];
                    }
                })
                //关闭加载更多
                v.loadMoreDoctorStatus = false;
            },
            selectDept() {
                //默认一级科室id
                let dept = [];
                axios.get("/pa/dept/").then(function (res) {
                    dept = res.data.data;
                    let count = true;
                    for (let i = 0; i < dept.length; i++) {
                        if (dept[i].id === dept[i].level) {
                            v.dept1.push(dept[i]);
                            //获取默认页面的科室id
                            if (count) {
                                v.deptId = dept[i].level;
                                v.selectDoctor(v.deptId);
                                count = false;
                            }
                        } else {
                            v.dept2.push(dept[i]);
                        }
                    }
                    //默认页面数据加载
                    v.loadIndexDept(v.activeIndex);
                    this.loading = false;
                })
            },
            //获取医生数据 根据一级科室查询
            selectDoctor(parentDeptId) {
                //获取全部医生数据
                axios.get("/pa/doctor/queryByParentDeptId/" + parentDeptId).then(function (res) {
                    if (res.data.code === 1) {
                        v.doctorData = res.data.data;
                    } else {
                        v.doctorData = [];
                    }
                })
                this.loading = false;
            },
            //获取医生数据 根据二级科室查询
            selectChildDoctor(childDeptId) {
                //获取全部医生数据
                axios.get("/pa/doctor/queryByDeptId/" + childDeptId).then(function (res) {
                    if (res.data.code === 1) {
                        v.doctorData = res.data.data;
                    } else {
                        v.$message.info("医生号源数据出了点问题，请稍后再试");
                    }
                })
                this.loading = false;
            },
            //默认页面数据加载
            loadIndexDept(activeIndex) {
                for (let i = 0; i < v.dept2.length; i++) {
                    if (v.dept1[activeIndex].id === v.dept2[i].level) {
                        //装目标数据
                        v.targetDept.push(v.dept2[i])
                    }
                }
                v.loading = false;
            },
            //鼠标悬停事件触发 医生title
            handleMouseEnter() {
                this.isTipVisible = true;
            },
            //鼠标移开事件触发 医生title
            handleMouseLeave() {
                this.isTipVisible = false;
            }
        },
        updated() {
            //加载医生数据
        },
        //页面渲染之后再进行调用
        mounted() {
            //加载科室信息
            this.selectDept();
            // this.purseDrawers=config.purseDrawers;
        },
    })
</script>
</html>